<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
			<style>
				/* 练习：1 圆形 2 正三角形
					 思路1：宽高与边框倒角一致
					 思路2：div#d1  css中：抓到div   【斜线】
					               左边框：50像素实线红色
								   右边框：50像素实线黄色
								   下边框：50像素实线黑色
							注意：先别加宽高  transparent透明色*/
		div#triangle{
			width: 0;
			/*border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 50px solid blue;*/
			/* 两行:倒三角，蓝色，透明度 3
			 提醒：所有边框：50px solid transparent
			      上边框颜色改成蓝色 0,0,255
			  */
			 border: 50px soid transparent;
			 border-right-color:rgba(0, 0, 255,.3);
		}
		/* outline 边框轮廓 只针对input元素 */
		input{
			outline: 1px solid red;
		}
		/* 实际应用：通配选择器 去掉轮廓 
		   {outline：0；}*/
		
	    div#circle{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			border-radius: 50%;
			/* 边框阴影 box-shadow 属性 */
			box-shadow: 5px 5px 50px 50px red inset;
		}
			</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text" />
	</body>
</html>